<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color:#000
        }
        canvas{
            left: 50%;
            top:50%;
            position: absolute;
            border:1px solid #000;
            margin-top:-250px;
            margin-left: -250px;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas"width="500" height="500"></canvas>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        var mycavas=document.getElementById('mycanvas');
        var ctx=mycavas.getContext('2d');
        ctx.strokeStyle='#00ffff';
        ctx.lineWidth=17;
        ctx.shadowBlur=15;
        ctx.shadowColor='#00ffff';

        function runTime(){
            var date =new Date();
            var today=date.toDateString();
            var h=date.getHours();
            var m=date.getMinutes();
            var s=date.getSeconds();
            var ms=date.getMilliseconds();
            var rs= s+(ms/1000);

            grandint = ctx.createRadialGradient(250,250,5,250,250,300);
            grandint.addColorStop(0,'#03303a');
            grandint.addColorStop(1,'#000');
            ctx.fillStyle = grandint;
            ctx.fillRect(0,0,500,500);

            ctx.beginPath(); //360/12=30
            ctx.arc(250,250,200,deg(270),deg((h*30)-90));
            ctx.stroke();

            ctx.beginPath(); //360/60=6
            ctx.arc(250,250,170,deg(270),deg((m*6)-90));
            ctx.stroke();

            ctx.beginPath(); //360/60=6
            ctx.arc(250,250,140,deg(270),deg((rs*6)-90));
            ctx.stroke();
            ctx.lineCap='round';//起始和结尾样式
            ctx.lineJoin='round';
           
            ctx.font='25px Helvetica';
            ctx.fillStyle='rgba(0,255,255,1)';
            ctx.fillText(today,175,250);

            ctx.font='25px Helvetica';
            ctx.fillStyle='rgba(0,255,255,1)';
            var h=('0'+h).slice(-2);
            var m=('0'+m).slice(-2);
            var s=('0'+s).slice(-2);
            ctx.fillText(h+':'+m+':'+s+':'+ms,175,280);

        }
  
        setInterval(runTime,40);
        function deg(deg){//角度变弧度
            var f= Math.PI/180;
            return deg*f;
        }
    </script>
</body>
</html>